<template>
  <div class="NavBar">
     <div class="left">
       <slot name="left"></slot>
     </div>
     <div class="center">
       <slot name="center"></slot>
     </div>
     <div class="right">
       <slot name="right"></slot>
     </div>
     <div class="default">
       <slot :name="name"></slot>
     </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: 'default'
    }
  }
}
</script>
<style scoped>
.NavBar {
  display: flex;
  width: 100%;
  height: 200px;
  background-color: red;
}
.left {
  flex: 1;
  height: 100%;
  background-color: lightblue;
}
.center {
  flex: 1;
  height: 100%;
  background-color: lightcoral;
}
.right {
  flex: 1;
  height: 100%;
  background-color: lightgreen;
}
.default {
  flex: 1;
  background-color: lightgoldenrodyellow;
  height: 100%;
}
</style>
